import React, {Component} from 'react';
import {Redirect} from "react-router-dom"
import "./login.less"
import logo from "../../assets/images/logo.png"
import {Form, Input, Button, Icon,message} from 'antd'
import memoryUtils from "../../utils/memoryUtils";
import storageUtils from "../../utils/storageUtils";
import {reqLogin} from "../../api";

const Item = Form.Item

class Login extends Component {
    login =  (ev) => {
        ev.preventDefault()
        // 统一校验
        this.props.form.validateFields(async (err,values)=>{
            // 校验成功
            if(!err){
                const {username,password} = values
                console.log(values)
                const result = await reqLogin(username,password)

                if(result.status === 0){
                    message.success('登录成功')
                    const user = result.data
                    memoryUtils.user = user // 保存到内存中
                    storageUtils.saveUser(user) // 保存到local当中
                    console.log('usera',user)
                    this.props.history.replace('/admin') // 不需要再回退到登录
                }else {
                    message.error(result.msg)

                }
            }else {
                console.log('校验失败')
            }
        })





        // const {form} = this.props
        // // 获取表单的单项数据
        // const values = form.getFieldsValue()
        // console.log('values', values)
    }

    validatorPwd = (rule,value,callback)=>{
        // console.log('校验',rule,value,callback)
        const length = value && value.length
        const pwdReg = /^[a-zA-Z0-9_]+$/
        if(!value){
            callback('密码必须输入')
        }else if(length<4){
            callback('密码必须大于4位')
        }else if(length>12){
            callback('密码必须大于12位')
        }else if(!pwdReg.test(value)){
            callback('密码必须是英文、数组或下划线组成')
        }else {
            callback() // 必须调用 callback
        }
    }

    render() {
        const {form} = this.props
        const {getFieldDecorator} = form

        const user =  memoryUtils.user
        // 如果内存中已经user有值则自动跳转到admin
        if(user&&user._id){
            <Redirect to="/"/>
        }

        return (
            <div className="login">
                <header className="login-header">
                    <img src={logo} alt="logo"/>
                    <h1>React 项目: 后台管理系统</h1>
                </header>
                <section className="login-content">
                    <h2>用户登录</h2>
                    <Form onSubmit={this.login} className="login-form">
                        <Item>

                            {getFieldDecorator('username', {
                                // 声明式验证
                                rules: [
                                    {required: true, whiteSpace: true, message: '请输入你的用户名'},
                                    {min: 4, message: '用户名至少4位'},
                                    {max: 12, message: '用户名最多12位'},
                                    {pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字、下划线'}
                                ],
                            })(
                                <Input
                                    prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                    placeholder="用户名"
                                />,
                            )}
                        </Item>
                        <Item>
                            {getFieldDecorator('password', {
                                // 自定义校验
                                rules: [{validator:this.validatorPwd}],
                            })(
                                <Input
                                    prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                    placeholder="密码"
                                />,
                            )}
                        </Item>
                        <Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
                        </Item>
                    </Form>
                </section>

            </div>
        );
    }
}

// 包装Form组件生成一个新的组件：Form(Login)
// 新组建会向Form组件传递一个强大的对象form属性
const WrapLogin = Form.create()(Login)
export default WrapLogin;

// 1.前台表单验证
// 2.收集表单输入数据
